<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script type="text/javascript" src="static/js/echarts.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
</head>
<body>
<div id="dd">

</div>

</body>
</html>
<style>
    #dd{
        width: 600px;
        height: 400px;
        border: solid red;
    }
</style>
<script>
  var  char=echarts.init(document.getElementById('dd'))
  char.setOption({{ map_data | safe }})
</script>